<template>
	<pane size="50">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :model="state.queryForm" ref="queryRef" :inline="true"> </el-form>
			<el-table
				:data="state.dataList"
				highlight-current-row
				v-loading="state.loading"
				border
				style="width: 100%; height: 100%"
				:cell-style="tableStyle.cellStyle"
				stripe
				:header-cell-style="tableStyle.headerCellStyle"
				@row-click="clickRow"
				ref="tableRef"
			>
				<el-table-column :label="$t('pickApply.processCode')" prop="process_code" width="100px" />
				<el-table-column :label="$t('pickApply.materialCode')" prop="material_code" width="150px">
					<template #default="scope">
						<el-tag :type="+scope.row.apply_qty < +scope.row.barcodeQty ? 'primary' : 'danger'" size="small" effect="dark">
							{{ scope.row.material_code }}
						</el-tag>
					</template> </el-table-column
				>>
				<el-table-column :label="$t('pickApply.materialName')" show-overflow-tooltip prop="material_name" width="200px" />
				<el-table-column :label="$t('pickApply.spec')" show-overflow-tooltip prop="specification" width="200px" />
				<el-table-column :label="$t('pickApply.unit')" prop="unit" width="100px" />
				<el-table-column :label="$t('pickApply.status')" prop="realStatus" width="100px">
					<template #default="scope">
						<el-tag :type="getTagType(scope.row.status)" effect="dark">
							{{ scope.row.realStatus }}
						</el-tag>
					</template> </el-table-column
				>>
				<el-table-column :label="$t('pickApply.transferQty')" prop="transfer_qty" width="150px" />
				<el-table-column :label="$t('pickApply.notTransferQty')" prop="notTransferQty" width="150px" />
				<!--				<el-table-column :label="$t('pickApply.applyQty')" prop="apply_qty" width="150px" />-->
				<el-table-column :label="$t('pickApply.applyQty')" prop="apply_qty" width="150px">
					<template #default="scope">
						<div @dblclick="editRow(scope)">
							<el-input
								v-if="scope.row.isEditing"
								v-model="scope.row.apply_qty"
								@blur="saveEdit(scope.row)"
								@keydown.enter="saveEdit(scope.row)"
								size="small"
								style="width: 100%"
							/>
							<span v-else>{{ scope.row.apply_qty }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column :label="$t('pickApply.barcodeQty')" prop="barcodeQty" width="150px" />

				<el-table-column :label="$t('inProduction.operation')" min-width="120">
					<template #default="scope">
						<el-button type="primary" size="small" @click.prevent="onOpenAddMenu(scope.row)">
							{{ $t('inProduction.modify') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>
		<MenuDialog @refresh="reloadDetail" ref="menuDialogRef"/>
	</pane>
	<pane size="50">
		<div class="layout-padding-auto layout-padding-view">
			<el-table
				:data="tableData.dataList"
				highlight-current-row
				v-loading="tableData.loading"
				border
				style="width: 100%; height: 100%"
				:cell-style="tableStyle.cellStyle"
				stripe
				:header-cell-style="tableStyle.headerCellStyle"
				ref="tableRef"
			>
				<el-table-column :label="$t('bar.barcode')" prop="barcode" width="250px" />
				<el-table-column :label="$t('pickApply.materialCode')" prop="material_code" width="150px" />
				<el-table-column :label="$t('pickApply.materialName')" show-overflow-tooltip prop="material_name" width="200px" />

				<el-table-column :label="$t('makeUp.locationCode')" show-overflow-tooltip prop="location_code" width="150px" />
				<el-table-column :label="$t('makeUp.batchNumber')" prop="batch_numberStr" width="150px" />
				<el-table-column :label="$t('pickApply.NumberOfBarcodes')" prop="barcode_qty" width="150px">
					<template #default="scope">
						<el-tag :type="scope.row.barcode_qty > 0 ? 'primary' : 'danger'" effect="dark">
							{{ scope.row.barcode_qty }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('pickApply.QuantitySent')" prop="shouldsend_qty" width="150px">
					<template #default="scope">
						<el-tag :type="scope.row.shouldsend_qty > 0 ? 'primary' : 'danger'" effect="dark">
							{{ scope.row.shouldsend_qty }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('pickApply.IssuedQuantity')" prop="realysend_qty" width="150px">
					<template #default="scope">
						<el-tag :type="scope.row.realysend_qty > 0 ? 'primary' : 'danger'" effect="dark">
							{{ scope.row.realysend_qty }}
						</el-tag>
					</template>
				</el-table-column>
<!--				<el-table-column :label="$t('pickApply.RemainingBarcodeQuantity')" prop="left_barcode_qty" width="150px" fixed="right">-->
<!--          <template #default="scope">-->
<!--            <el-tag :type="scope.row.left_barcode_qty > 0 ? 'primary' : 'danger'" effect="dark">-->
<!--              {{ scope.row.left_barcode_qty }}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--				</el-table-column>-->
        <el-table-column :label="$t('pickApply.RemainingBarcodeQuantity')" prop="left_barcode_qtyStr" width="150px" fixed="right" >
          <template #default="scope">
            <el-tag :type="scope.row.left_barcode_qtyStr > 0 ? 'primary' : 'danger'" effect="dark">
              {{ scope.row.left_barcode_qtyStr }}
            </el-tag>
          </template>
        </el-table-column>
			</el-table>
			<pagination @size-change="sizeChange" @current-change="currentChange" v-bind="tableData.pagination" />
		</div>
	</pane>
</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { getApplyDetails, getApplyBarcodes, UpdateDetailApplyQty } from '/@/api/platform/wms/pickApply';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';

// 引入组件
const MenuDialog = defineAsyncComponent(() => import('./applyEdit.vue'));

const { t } = useI18n();

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getApplyDetails,
});

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const tableRef = ref();
const tableData = reactive({
	dataList: [],
	loading: false,
	pagination: {
		current: 1,
		pageSize: 20,
		total: 0,
	},
	id: '',
});

// 搜索变量
const queryRef = ref();

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	getDataList();
};

// 通过id进行子表的查询
const query = (row: Object) => {
	// 赋值查询参数
	state.queryForm.PickapplyId = row.id;
	tableData.id = row.id;
	// 刷新子表数据
	getDataList();
};

const clickRow = (row: any) => {
	getList(row.id);
};

const getList = async (id) => {
	tableData.pagination.loading = true;
	let params = {
		pickApplyDetailId: id,
		current: tableData.pagination.current,
		size: tableData.pagination.pageSize,
	};
	try {
		let res = await getApplyBarcodes(params);
		tableData.dataList = res.data.records;
		tableData.pagination.total = res.data.total;
		tableData.pagination.loading = false;
	} catch (e) {
		console.log(e);
		tableData.pagination.loading = false;
	}
};

const sizeChange = (val) => {
	tableData.pagination!.pageSize = val;
	getList();
};

const currentChange = (val) => {
	tableData.pagination!.current = val;
	getList();
};

// 根据状态返回对应的 type
const getTagType = (status) => {
	switch (status) {
		case 'create':
			return 'default';
		case 'init':
			return 'info';
		case 'todo':
			return 'warning';
		case 'finish':
			return 'success';
		case 'closed':
			return 'danger';
		default:
			return 'default'; // 默认类型
	}
};

const editRow = (scope) => {
	scope.row.isEditing = true; // 设置当前行为编辑状态
};

const saveEdit = (row) => {
	row.isEditing = false; // 保存编辑并退出编辑状态
};

const modifyRow = async (row) => {
	try {
		await UpdateDetailApplyQty({
			pickapplyDetailId: row.id,
			applyQty: row.apply_qty,
		});
		ElMessage.success(t('inProduction.editSuccess'));

		state.queryForm.PickapplyId = tableData.id;
		getDataList();
	} catch (e) {
		ElMessage.error(e.msg);
		state.queryForm.PickapplyId = tableData.id;
		getDataList();
	}
};
const reloadDetail=()=>{
	state.queryForm.PickapplyId = tableData.id;
	getDataList();
};
const menuDialogRef = ref();
// 打开新增菜单弹窗
const onOpenAddMenu = (row?: any) => {
	
  menuDialogRef.value.openDialog(row);
};
// 暴露变量
defineExpose({
	resetQuery,
	query,
});
</script>
